<template>
	<div class="">
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con ">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="bghhhhh fragment-container">
						<div class="rightCon">
							<headerPcTow title="VIP"></headerPcTow>
							<div class="main_level_box">
								<div class="main_level_left">
									<div class="level_ava">
										<span>{{userInfo?userInfo.vip_id:''}}</span>
									</div>
									<div class="level_content" v-if="userInfo && userInfo.vip_id == 0">
										<div class="level_content_top">
											<span>{{$t('l_juli')}}<i>VIP{{userInfo.levelInfo[0].level}}</i></span>
											<span>{{$t('l_damahaicha')}}<strong>{{(userInfo.levelInfo[0].level_money-userInfo.levelDecMoney).toFixed(2)*1}}</strong></span>
										</div>
									</div>
									<div class="level_content" v-else>
										<div class="level_content_top">
											<span>{{$t('l_juli')}}<i>VIP{{userInfo.levelInfo[1].level}}</i></span>
											<span>{{$t('l_damahaicha')}}<strong>{{(userInfo.levelInfo[1].level_money-userInfo.levelDecMoney).toFixed(2)*1}}</strong></span>
										</div>
									</div>
								</div>
								<div class="main_level_right">
									<div class="litem1 litem2THree" v-if="findinfo">{{$t('l_yijianlingqu')}}</div>
									<div class="litem1 litem3THree" @click="vipGetMoney" v-else>{{$t('l_yijianlingqu')}}
									</div>
									<div class="litem1 litem3THree" @click="vipMoney">{{$t('l_lingqujilu')}}</div>
								</div>
								<div class="boxLeft">
									{{$t('l_dangqiandengji')}}
								</div>
							</div>
							<div class="con1One">
								<div class="con1TowTitle">
									VIP{{$t('l_dengjiduizhaobiao')}}
								</div>
								<div class="con1Tow">
									<div class="headerTow">
										<div :class="'hitemTow ' + (item.id == navIndex?'active':'')"
											v-for="(item,index) in navList" :key="index" @click="changeNav(item)">
											<div class="nav_text">
												{{ item.name }}
											</div>
										</div>
									</div>
								</div>
								<div class="ul" style="width: 100%;padding-bottom: 20px;">
									<div class="fanshuiBox">
										<ul>
											<li>{{$t('l_dengji')}}</li>
											<li v-if="navIndex==0">{{$t('l_jinjizaidama')}}
												<span class="wentibox" @click="openPop">?</span>
											</li>
											<li v-if="navIndex==0">{{$t('l_jinjijiangjin')}}</li>
											<li v-if="navIndex==1">{{$t('l_zhoufenglu')}}</li>
											<li v-if="navIndex==2">{{$t('l_yuefenglu')}}</li>
										</ul>
										<div class="fanlistBox">
											<ul v-for="(item,index) in lists" :key="index"
												:class="userInfo.vip_id==item.level?'active':''">
												<li>
													<div class="level_ava">
														<span>{{item.level}}</span>
													</div>
												</li>
												<li v-if="navIndex==0">
													<!-- {{item.level_money}} -->
													<div class="level_num">
														<div class="level_num_line">
															<div class="line_box"
																:style="`width:`+(item.level>userInfo.vip_id?userInfo.levelDecMoney:item.level_money)/item.level_money*100+`%;`">
															</div>
															<span>{{(item.level>userInfo.vip_id?userInfo.levelDecMoney:item.level_money)*1}}/{{item.level_money*1}}</span>
														</div>
													</div>
												</li>
												<li>
													<span v-if="navIndex==0"
														style="color:  var(--theme-secondary-color-finance);">{{item.send_money}}</span>
													<span v-if="navIndex==1"
														style="color:  var(--theme-secondary-color-finance);">{{item.week_money}}</span>
													<span v-if="navIndex==2"
														style="color:  var(--theme-secondary-color-finance);">{{item.month_money}}</span>
													<!-- <span style="color: var(--theme-text-color);">-</span> -->
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="con1One">
								<div class="con1TowTitle"
									style="		border-bottom: 1px solid var(--theme-color-line);margin-bottom: 10px;">
									VIP {{$t('l_guizeshuoming')}}
								</div>
								<div class="contentTow">
									{{$t('l_guizeshuoming1')}}<br>
									{{$t('l_guizeshuoming2')}}<br>
									{{$t('l_guizeshuoming3')}}<br>
									{{$t('l_guizeshuoming4')}}<br>
									{{$t('l_guizeshuoming5')}}<br>
									{{$t('l_guizeshuoming6')}}<br>
									{{$t('l_guizeshuoming7')}}<br>
								</div>
							</div>
						</div>
						<Bottom :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></Bottom>
					</div>

					<div class="regBox" v-if="is_showPop">
						<div class="regBox_pub"></div>
						<div class="popBox">
							<div class="title">
								{{$t('l_wenxintishi')}}
							</div>
							<div class="content">
								{{$t('l_guizeshuoming8')}}
							</div>
							<div class="butt" @click="clocePop">
								x
							</div>
						</div>
					</div>
				</div>

			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="notice pageContainer">
					<navHeader title="VIP"></navHeader>
					<div class="fragment-container">
						<div class="main_level_boxtow">
							<div class="main_level_left">
								<div class="level_ava">
									<span>{{userInfo?userInfo.vip_id:''}}</span>
								</div>
								<div class="level_content">
						
									<div class="level_content_top" v-if="userInfo.vip_id">
											<span>{{userInfo.levelInfo[userInfo.vip_id].name}}</span>
											<span>{{ $t('l_touzhuliushui') }}<strong style="margin-left:10px;">{{userInfo.levelInfo[userInfo.vip_id].num}}</strong></span>
										</div>
								</div>
							</div>
							<!-- <div class="main_level_right">
								<div class="litem1 litem2THree" v-if="findinfo">{{$t('l_yijianlingqu')}}</div>
								<div class="litem1 litem3THree" @click="vipGetMoney" v-else>{{$t('l_yijianlingqu')}}
								</div>
								<div class="litem1 litem3THree" @click="vipMoney">{{$t('l_lingqujilu')}}</div>
							</div> -->
							<div class="boxLeft">
								{{$t('l_dangqiandengji')}}
							</div>
						</div>
						<div class="con1OneTow">
							<div class="con1TowTitleTow">
								VIP{{$t('l_dengjiduizhaobiao')}}
							</div>
							<!-- <div class="container scroll-container">
								<div class="nav_top_box">
									<div :class="'nav_item ' + (item.id == navIndex?'nav_active':'')"
										v-for="(item,index) in navList" :key="index" @click="changeNav(item)">
										<div class="nav_text">
											{{ item.name }}
										</div>
									</div>
								</div>
							</div> -->
							<div class="ul" style="width: 100%;padding-bottom: 20px;">
								<div class="fanshuiBoxTow">
									<!-- <ul>
										<li>{{$t('l_dengji')}}</li>
										<li v-if="navIndex==0">{{$t('l_jinjizaidama')}}
											<span class="wentibox" @click="openPop">?</span>
										</li>
										<li v-if="navIndex==0" :style="navIndex==0?'flex:unset;width:2rem;':''">
											{{$t('l_jinjijiangjin')}}
										</li>
										<li v-if="navIndex==1">{{$t('l_zhoufenglu')}}</li>
										<li v-if="navIndex==2">{{$t('l_yuefenglu')}}</li>
									</ul> -->
									<div class="fanlistBoxTow" v-if="userInfo">
										<ul v-for="(item,index) in lists" :key="index"
											:class="userInfo.vip_id==item.id?'active':''">
											<li>
												<div class="level_ava">
													<span>{{item.id}}</span>
												</div>
											</li>
											<li v-if="navIndex==0">
												<!-- {{item.level_money}} -->
												<div class="level_num">
													<div class="level_num_line">
														<div class="line_box"
															:style="`width:`+(item.id>userInfo.vip_id?userInfo.tz_amount:item.num)/item.num*100+`%;`">
														</div>
														<span
															style="display: block;width: 100%;">{{(item.id>userInfo.vip_id?userInfo.tz_amount:item.num)*1}}/{{item.num*1}}</span>
													</div>
												</div>
											</li>
											<!-- <li :style="navIndex==0?'flex:unset;width:2rem;':''">
												<span v-if="navIndex==0"
													style="color:  var(--theme-secondary-color-finance);">{{item.send_money}}</span>
												<span v-if="navIndex==1"
													style="color:  var(--theme-secondary-color-finance);">{{item.week_money}}</span>
												<span v-if="navIndex==2"
													style="color:  var(--theme-secondary-color-finance);">{{item.month_money}}</span>
											</li> -->
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="con1OneThree">
							<div class="con1TowTitleTow"
								style="		border-bottom: 1px solid var(--theme-color-line);padding-bottom: 10px;">
								VIP {{$t('l_guizeshuoming')}}
							</div>
							<div class="contentTow">
								{{$t('l_guizeshuoming1')}}<br>
								{{$t('l_guizeshuoming2')}}<br>
								{{$t('l_guizeshuoming3')}}<br>
								{{$t('l_guizeshuoming4')}}<br>
								{{$t('l_guizeshuoming5')}}<br>
								{{$t('l_guizeshuoming6')}}<br>
								{{$t('l_guizeshuoming7')}}<br>
							</div>
						</div>
						<div class="bottBut">
							<div class="bottButIt bottButItTow" @click="goback">
								{{$t('l_fanhui')}}
							</div>
							<!-- <div class="bottButIt bottButItThree" v-if="findinfo">
								{{$t('l_yijianlingqu')}}
							</div>
							<div class="bottButIt bottButItTow" @click="vipGetMoney" v-else>
								{{$t('l_yijianlingqu')}}
							</div> -->
						</div>
					</div>
					<div class="regBoxTow" v-if="is_showPop">
						<div class="regBox_pub"></div>
						<div class="popBox">
							<div class="title">
								{{$t('l_wenxintishi')}}
							</div>
							<div class="content">
								{{$t('l_guizeshuoming8')}}
							</div>
							<div class="closeBtn" @click="clocePop">

							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import Bottom from '../../components/bottom.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow,
			Bottom
		},
		data() {
			return {
				navIndex: 0,
				navList: [{
						id: 0,
						name: this.$t('l_jinjijiangjin')
					},
					{
						id: 1,
						name: this.$t('l_zhoufenglujiangjin')
					},
					{
						id: 2,
						name: this.$t('l_yuefenglujiangjin')
					}
				],
				noticeData: [],
				navIndex1: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],

				noticeData: [],
				is_showPop: false,
				userInfo: {
					levelInfo:[]
				},
				lists: [],
				findinfo: null
			}
		},
		created() {
			this.reloadUserInfo()
			this.vipList()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			goback() {
				this.$router.go(-1)
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			vipList() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.vipList({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.lists = res.data.list
						this.findinfo = res.data.info
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			vipGetMoney() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.vipGetMoney({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.vipList()
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			changeNav(item) {
				this.navIndex = item.id
				document.querySelector('.scroll-container').scrollTop = document.querySelector('#gameslist_' + item.id)
					.offsetTop - (window.outerWidth / 750 * 200)
			},
			openPop() {
				this.is_showPop = true;
			},
			clocePop() {
				this.is_showPop = false;
			},
			vipMoney() {
				this.$router.push('../preferential/vipMoney')
			}
		}
	}
</script>

<style lang="less" scoped>
	.fragment-container {
		height: 100vh;
		overflow-y: scroll;
		max-width: 100vw;
		margin: 0 auto;
	}

	.contentTow {
		width: 96%;
		margin: 0px auto;
		padding: 10px 0px;
		color: var(--theme-text-color);
		font-size: 14px;
	}

	.contentThree {
		width: 96%;
		margin: 0px auto;
		padding: 10px 0px;
		color: var(--theme-text-color);
		font-size: 12px;
		padding-bottom: 50px;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		// height: 300px;
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.fanshuiBoxTow {
		width: 96%;
		margin: 10px auto 0;
	}

	.regBox {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .65);

		.regBox_pub {
			// width: 100vw;
			// height: 100vh;
			// background-color:rgba(0,0,0,.65);

		}

		.popBox {
			position: fixed;
			top: 50%;
			transform: translate(-50%, -50%);
			left: 50%;
			width: 366px;
			padding: 30px 20px;
			border-radius: 10px;
			box-sizing: border-box;
			background-color: var(--theme-bg-color);
			border: 1px solid var(--theme-color-line);

			.title {
				font-size: 14px;
				text-align: center;
				margin: 0px 0px 10px;
				color: #fff;
			}

			.content {
				font-size: 12px;
				color: var(--theme-text-color);
			}

			.butt {
				position: absolute;
				color: #fff;
				font-size: 25px;
				top: 5px;
				right: 15px;
				cursor: pointer;
			}
		}
	}

	.regBoxTow {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .65);

		.regBox_pub {
			// width: 100vw;
			// height: 100vh;
			// background-color:rgba(0,0,0,.65);

		}

		.popBox {
			position: fixed;
			top: 50%;
			transform: translate(-50%, -50%);
			left: 50%;
			width: 80%;
			padding: 20px 20px;
			border-radius: 10px;
			box-sizing: border-box;
			background-color: var(--theme-bg-color);
			border: 1px solid var(--theme-color-line);

			.title {
				font-size: 14px;
				text-align: center;
				margin: 0px 0px 10px;
				color: #fff;
			}

			.content {
				font-size: 12px;
				color: var(--theme-text-color);
			}

			.butt {
				position: absolute;
				color: #fff;
				font-size: 25px;
				top: 5px;
				right: 15px;
				cursor: pointer;
			}
		}
	}

	.closeBtn {
		position: absolute;
		border-radius: 50%;
		z-index: 3;
		bottom: -.9rem;
		left: 0;
		right: 0;
		margin: auto;
		width: 0.5984rem;
		height: 0.5984rem;
		background-image: url(/icons/main.png);
		background-position: -5.1136rem -4.2024rem;
		background-size: 8.296rem 7.7928rem;
	}

	.ul {
		width: 100%;
		padding: 0px 10px;
		box-sizing: border-box;
		height: auto;
		overflow-y: auto;
	}

	.fanshuiBox>ul {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-around;
		border-radius: 5px;
		background-color: var(--theme-bg-color);
	}


	.fanshuiBox>ul li {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		text-align: center;
		color: var(--theme-text-color);

		&:first-child {
			width: 1.2rem;
			flex: unset;
		}
	}

	.fanshuiBox>ul li .wentibox {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background-color: var(--theme-primary-color);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 5px;
		font-size: 13px;
		color: #fff;
		cursor: pointer;
	}

	.fanshuiBoxTow>ul {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		font-size: 13px;
		background-color: var(--theme-main-bg-color);
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-around;
		border-radius: 5px;
	}


	.fanshuiBoxTow>ul li {
		// width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		// width: 33%;
		text-align: center;
		color: var(--theme-text-color);

		&:first-child {
			width: 1.4rem;
			flex: unset;
		}
	}

	.fanshuiBoxTow>ul li .wentibox {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background-color: var(--theme-primary-color);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 5px;
		font-size: 12px;
		color: #fff;
		cursor: pointer;
	}

	.fanlistBox>ul {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 15px;
		justify-content: space-around;
		border-radius: 5px;
	}

	.fanlistBox .active {
		border: 1px solid var(--theme-primary-color);
	}

	.fanlistBox>ul li {
		// width: 33%;
		text-align: center;
		color: var(--theme-text-color);
		flex: 1;
		// width: 33%;
		text-align: center;
		color: var(--theme-text-color);

		&:first-child {
			width: 1.4rem;
			flex: unset;
		}

		.level_ava {
			background-image: url(/icons/mine/img_dj0.png), url(/icons/mine/color1.png);
			width: 35px;
			height: 35px;
			font-size: 19px;
			align-items: center;
			background-position: 50%;
			background-repeat: no-repeat;
			background-size: contain;
			display: flex;
			justify-content: center;
			text-align: center;
			margin-right: 10px;

			span {
				-webkit-background-clip: text;
				background-clip: text;
				background-image: linear-gradient(180deg, #f7ea94 0, #e5b952 51%, #ce9510);
				color: transparent;
				font-style: normal;
				font-weight: 700;
			}
		}

		&:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.level_num {
			width: 100% !important;
			position: relative;
			border-radius: 7.5px;
			overflow: hidden;

			&_line {
				font-size: 13px;
				position: relative;
				width: 100%;
				color: rgba(0, 0, 0, .65);
				background-color: var(--theme-text-color-placeholder);
				height: 15px;
				border-radius: 7.5px;

				.line_box {
					background-color: var(--theme-ant-primary-color-0);
					height: 15px;
					border-radius: 7.5px;
					overflow: hidden;
					position: relative;
					vertical-align: middle;
					width: 0%;

				}

				span {
					color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 13px;
				}
			}
		}
	}

	.fanlistBox>ul li .liOne {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fanlistBox>ul li .liOne img {
		width: 45px;
		height: 35px;
	}

	.fanlistBox>ul:nth-child(2n) {
		background-color: var(--theme-bg-color);
	}

	.fanlistBoxTow>ul {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		font-size: 13px;
		justify-content: space-around;
		border-radius: 5px;
	}

	.fanlistBoxTow .active {
		border: 1px solid var(--theme-primary-color);
	}

	.fanlistBoxTow>ul li {
		flex: 1;
		// width: 33%;
		text-align: center;
		color: var(--theme-text-color);

		&:first-child {
			width: 1.4rem;
			flex: unset;
		}

		&:first-child {
			width: 1.4rem;
			flex: unset;
		}

		.level_ava {
			background-image: url(/icons/mine/img_dj0.png), url(/icons/mine/color1.png);
			width: 35px;
			height: 35px;
			font-size: 19px;
			align-items: center;
			background-position: 50%;
			background-repeat: no-repeat;
			background-size: contain;
			display: flex;
			justify-content: center;
			text-align: center;
			margin-right: 10px;

			span {
				-webkit-background-clip: text;
				background-clip: text;
				background-image: linear-gradient(180deg, #f7ea94 0, #e5b952 51%, #ce9510);
				color: transparent;
				font-style: normal;
				font-weight: 700;
			}
		}

		&:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.level_num {
			width: 100% !important;
			position: relative;

			&_line {
				font-size: 13px;
				position: relative;
				width: 100%;
				color: rgba(0, 0, 0, .65);
				background-color: var(--theme-text-color-placeholder);
				height: 15px;
				border-radius: 7.5px;

				.line_box {
					background-color: var(--theme-ant-primary-color-0);
					height: 15px;
					border-radius: 7.5px;
					overflow: hidden;
					position: relative;
					vertical-align: middle;
					width: 0%;

				}

				span {
					color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 13px;
				}
			}
		}
	}

	.fanlistBoxTow>ul li .liOne {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fanlistBoxTow>ul li .liOne img {
		width: 45px;
		height: 35px;
	}

	.fanlistBoxTow>ul:nth-child(2n) {
		background-color: var(--theme-main-bg-color);
	}

	.bottBut {
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		background-color: var(--theme-main-bg-color);
		padding: 10px;
		box-sizing: border-box;
		justify-content: space-between;

		.bottButIt {
			width: 46%;
			height: 30px;
			text-align: center;
			line-height: 30px;
			border-radius: 5px;
			font-size: 13px;
		}

		.bottButItTow {
			border: 1px solid;
			background-color: transparent;
			border-color: var(--theme-primary-color);
			color: var(--theme-primary-color);
			cursor: pointer;
		}

		.bottButItThree {
			border: 1px solid;
			background-color: var(--theme-disabled-bg-color);
			border-color: var(--theme-disabled-bg-color);
			color: var(--theme-disabled-font-color);

			cursor: pointer;
		}
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;


	}

	.main_level_boxtow {
		align-items: center;
		display: flex;
		width: 96%;
		margin: 10px auto 0;
		justify-content: space-between;
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 20px 10px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		position: relative;

		.boxLeft {
			padding: 3px 3px;
			box-sizing: border-box;
			align-items: center;
			background-color: var(--theme-secondary-color-error);
			border-radius: 5px 5px 5px 0;
			color: #fff;
			display: flex;
			font-size: 12px;
			justify-content: center;
			left: 0;
			position: absolute;
			top: 0;
			z-index: 1
		}

		.main_level_left {
			display: flex;
			align-items: center;

			.level_ava {
				background-image: url(/icons/mine/img_dj0.png), url(/icons/mine/color1.png);
				width: 55px;
				height: 55px;
				font-size: 19px;
				align-items: center;
				background-position: 50%;
				background-repeat: no-repeat;
				background-size: contain;
				display: flex;
				justify-content: center;
				text-align: center;
				margin-right: 10px;

				span {
					-webkit-background-clip: text;
					background-clip: text;
					background-image: linear-gradient(180deg, #f7ea94 0, #e5b952 51%, #ce9510);
					color: transparent;
					font-style: normal;
					font-weight: 700;
				}
			}

			.level_content {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				flex-grow: 1;

				&_top {
					font-size: 13px;
					color: var(--theme-text-color-lighten);
					text-align: left;

					p {
						i {
							color: var(--theme-secondary-color-error);
							font-weight: 700;
							margin: 0 5px;
						}

						strong {
							color: var(--theme-text-color-darken);
						}
					}
				}
			}
		}

		.main_level_right {


			.litem1 {
				padding: 0 2.5px;
				line-height: 25px;
				text-align: center;
				font-size: 12px;
				color: #ffff;
				border-radius: 5px;
				margin: 0 auto;
				margin-top: 10px;
				cursor: pointer;
				margin-left: 10px;
			}

			.litem2THree {
				width: 60px;
				height: 25px;
				line-height: 25px;
				font-size: 12px;
				cursor: pointer;
				background-color: rgb(153, 153, 153);
			}

			.litem3THree {
				width: 60px;
				height: 25px;
				line-height: 25px;
				font-size: 12px;
				cursor: pointer;
				background-color: var(--theme-primary-color);
			}
		}
	}

	.main_level_box {
		align-items: center;
		display: flex;
		justify-content: space-between;
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 35px 10px 20px;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 20px;
		position: relative;

		.boxLeft {
			padding: 3px 3px;
			box-sizing: border-box;
			align-items: center;
			background-color: var(--theme-secondary-color-error);
			border-radius: 5px 5px 5px 0;
			color: #fff;
			display: flex;
			font-size: 12px;
			justify-content: center;
			left: 0;
			position: absolute;
			top: 0;
			z-index: 1
		}

		.main_level_left {
			display: flex;
			align-items: center;

			.level_ava {
				background-image: url(/icons/mine/img_dj0.png), url(/icons/mine/color1.png);
				width: 55px;
				height: 55px;
				font-size: 19px;
				align-items: center;
				background-position: 50%;
				background-repeat: no-repeat;
				background-size: contain;
				display: flex;
				justify-content: center;
				text-align: center;
				margin-right: 10px;

				span {
					-webkit-background-clip: text;
					background-clip: text;
					background-image: linear-gradient(180deg, #f7ea94 0, #e5b952 51%, #ce9510);
					color: transparent;
					font-style: normal;
					font-weight: 700;
				}
			}

			.level_content {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				flex-grow: 1;

				&_top {
					font-size: 13px;
					color: var(--theme-text-color-lighten);
					text-align: left;

					span {
						i {
							color: var(--theme-secondary-color-error);
							font-weight: 700;
							margin: 0 5px;
						}

						strong {
							color: var(--theme-text-color-darken);
						}
					}
				}
			}
		}

		.main_level_right {
			display: flex;
			align-items: center;

			.litem1 {
				padding: 0 2.5px;
				line-height: 25px;
				text-align: center;
				font-size: 12px;
				color: #ffff;
				border-radius: 5px;
				margin: 0 auto;
				margin-top: 10px;
				cursor: pointer;
				margin-left: 10px;
			}

			.litem2THree {
				width: 70px;
				height: 30px;
				line-height: 30px;
				font-size: 13px;
				cursor: pointer;
				background-color: rgb(153, 153, 153);
			}

			.litem3THree {
				width: 70px;
				height: 30px;
				line-height: 30px;
				font-size: 13px;
				cursor: pointer;
				background-color: var(--theme-primary-color);
			}
		}
	}

	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}

	.con1One {
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 20px 0px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		margin-top: 20px;
	}

	.con1OneTow {
		padding: 10px 0px 10px;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.con1OneThree {
		padding: 0px 0px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		width: 96%;
		margin: 0px auto
	}

	.con1Tow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 10px;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.con1TowTitle {
		font-size: 18px;
		color: #fff;
		margin-bottom: 10px;
		padding: 0px 20px;
	}

	.con1TowTitleTow {
		font-size: 15px;
		color: #fff;
		padding: 0px 10px;
	}

	.headerTow {
		height: 36px;
		display: flex;
		padding: 0px 10px;
		justify-content: flex-start;
		align-items: center;
	}

	.hitemTow {
		height: 30px;
		border-bottom: 2px solid transparent;
		line-height: 30px;
		font-size: 12px;
		color: #fff;
		margin-left: 30px;
		cursor: pointer;
		position: relative;
	}

	.hitemTow:first-child {
		margin-left: 0;
	}

	.hitemTow.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.notice {
		width: 100vw;
		min-height: 100vh;
		background-color: var(--theme-bg-color);

		.nav_top_box {
			padding: 0.1rem 0.2rem 0;
			border-bottom: thin solid var(--theme-color-line);
			display: flex;

			.nav_item {
				font-size: .22rem;
				color: var(--theme-text-color-darken);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				text-align: center;
				height: 0.72rem;
				margin-right: 0.6rem;

				.nav_text {
					font-weight: 300;
				}

				.nav_tab_box {
					height: 0.32rem;
					position: absolute;
					top: -0.02rem;
					right: -0.26rem;

					.tab_text {
						font-size: .18rem;
						height: 0.26rem;
						line-height: .26rem;
						padding: 0 0.04rem;
						background-color: var(--theme-secondary-color-error);
						border-radius: 0.125rem 0.125rem 0.125rem 0;
						color: #fff;
						width: 100%;
						font-weight: 300;
					}

					p:nth-child(2) {
						border-bottom: 0.07rem solid transparent;
						border-left: 0.07rem solid var(--theme-secondary-color-error);
						border-right: 0.07rem solid transparent;
						height: 0;
						width: 0;
					}
				}
			}

			.nav_active {
				border-bottom: 0.04rem solid var(--theme-primary-color);
				color: var(--theme-primary-color);
			}
		}
	}

	/* 底部 */
	.bottomBox {
		background: var(--theme-side-footer-bg-color);
		width: 100%;
		margin-top: 80px;
		padding-bottom: 60px;
	}

	.bottomBoxOne {
		width: 62%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
	}

	.boxTop {
		display: flex;
		justify-content: space-between;
		padding: 20px 0px;
		box-sizing: border-box;
	}

	.boxTopL {
		display: flex;
		justify-content: space-between;
		font-size: 15px;
	}

	.boxTopL li {
		width: 176px;
		color: var(--theme-text-color-lighten);
	}

	.boxTopL h3 {
		font-weight: 400;
		font-size: 15px;
		color: var(--theme-text-color);
		margin-bottom: 8px;
	}

	.boxTopL a {
		cursor: pointer;
		color: var(--theme-text-color-lighten);
		margin-bottom: 8px;
	}

	.boxTopL a:hover {
		color: var(--theme-primary-color);
	}

	.boxTopR {
		width: 420px;
	}

	.boxTopRImg {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.boxTopRImg img {
		width: 45px;
		height: 45px;
		margin: 0px 12px 12px 0px;
	}

	.boxTopRText {
		font-size: 13px;
		margin-top: 10px;
		color: var(--theme-text-color-lighten);
	}

	.boxCon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxCon img {
		width: 85px;
		height: 30px;
		margin: 10px 8px;
	}

	.boxCon img:nth-child(1),
	.boxCon img:nth-child(2),
	.boxCon img:nth-child(3) {
		width: 95px;
		height: 30px;
		margin: 10px 6px;
	}

	.boxBot {
		font-size: 13px;
		padding-bottom: 20px;
		box-sizing: border-box;
		text-align: center;
		color: var(--theme-text-color-lighten);
	}
</style>